<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    let data = {
        name: '尚硅谷',
        address: 'atguigu'
    }

    function Observer(obj) {
        //汇总对象中所有的属性形成一个数组
        const keys = Object.keys(obj);
        //遍历每个属性名，为实例对象添加get与set
        keys.forEach((item) => {
            Object.defineProperty(this, item, {
                get() {
                    return obj[item];
                },
                set(val) {
                    console.log(`${item}被改了,重新解析模板---重新解析模板便会形成新的虚拟dom---然后新旧dom对比---然后更新页面`);
                    obj[item] = val;
                }
            });
        });
    };
    //创建一个监视的实例对象,用于监视data中属性的变化
    const obs = new Observer(data);
    //第一步加工data
    data = obs;
    //第二部让vm._data=data
    //准备一个vm实例对象
    let vm = {};
    vm._data = obs;
</script>

</html>